<template>
    <div id="myCard">
        <header class="header"><router-link to='/mine?type=3' class="addTrend"><i class="el-icon-arrow-left"></i></router-link>我的公司</header>
        <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
            <div @click="toMyDetail(item.id)" class="receiveitem" v-for="(item,index) in cardLists" :key="index" :class="{hasBottom:index==0}">
                <div class="userinfo">
                    <i><img v-if="item.cplogo" :src="baseurl.baseUrl+item.cplogo"><span v-else>{{item.cname.substr(0,1)}}</span></i>
                    <p>{{item.cname}}</p>
                </div>
                <div class="icons"></div>
            </div>                 
        </scroller>
    </div>
</template>

<script>
let perPage = 10;
import {isCreateCard} from '../../../js/dataServe.js'
import {baseUrl} from '../../../config/env'

// let baseUrl = {baseUrl}
export default {
    data(){
        return {
            arr:[],
            cardLists:[],
            baseurl:{baseUrl},
            noData: '',
            nowPage:1
        }
    },
    components:{},
    created(){
        // this.$store.commit('changeShowit',{val:false})
    },
    mounted(){
       
    },
    methods:{
        async infinite(done) {
                let cards = [];
                let self = this;
                if(cards.length == 0){
                    let responseData = isCreateCard();
                    await responseData.then((res)=>{
                                                    if(res.result == 1){
                                                        let lists = res.data.reverse();
                                                        lists.forEach( (item,key) => {
                                                            if(item.itype==0){
                                                                cards.push(item)
                                                            }
                                                        })
                                                    }
                                                })
                    }
                let pageNum = Math.ceil(cards.length/perPage);

                if(self.nowPage>pageNum){
                    self.$refs.my_scroller.finishInfinite(2);
                    return;
                }else{

                    for (let i = (self.nowPage-1)*perPage; i < perPage*self.nowPage; i++) {
                        if(cards[i]){
                            self.cardLists.push(cards[i]);
                        }
                    }
                    self.nowPage++;
                    done()
                }
            

            },
        refresh(done) {
            done()
        },
        toMyDetail(id){
            this.$router.push({path:"/card/companyCard",query:{id:id,uid:sessionStorage.uid}})
        }
    },
    beforeRouteEnter(to, from, next) {
        to.meta.keepAlive = false;
        next();
    },
}
</script>

<style scoped >
#myCard {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
}
.header{
    width:100%;
    height:3rem;
    line-height:3rem;
    background: -moz-linear-gradient(top, #00AA76 0%, #1ACCAC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AA76), color-stop(100%,#1ACCAC));
    background: -webkit-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -o-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -ms-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: linear-gradient(to right, #00AA76 0%,#1ACCAC 100%);
    color:#ffffff;
    font-size:1.2rem;
    position: fixed;
    top: 0;
    z-index:5;
}
.receiveitem{
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: linear-gradient(to bottom, #FF9648 0%,#FB6A00 100%);
    border-bottom: 1px solid #dfdfdf;
    width: 80%;
    border-radius: 5px;
    margin: auto;
    margin-bottom:1rem;
}
.userinfo{
    display:flex;
}
.receiveitem i{
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    display: block;
    background: #ffffff;
    border-radius: 5rem;
}
.receiveitem p{
    height:4.4rem;
    line-height:4.4rem;
    margin-left:1rem;
    color: #fff;
}
.receiveitem i img,.receiveitem i span{
    width: 4rem;
    height: 4rem;
    border-radius: 5rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background:#999999;
    color:#ffffff;
    font-size: 1.5rem;
    line-height: 4rem;
}
header a{
    position: absolute;
    left: 2%;
    color: #ffffff;
    width: 2rem;
}
.hasBottom{
    margin-top:1rem;
}
.scroller{
    height: auto !important;
    margin-top: 3rem;
    bottom: 0;
}
</style>
